import { Component, onMount } from "solid-js";

const Knot: Component<{
  id: string;
  styles?: any;
  color?: any;
  size: number;
}> = ({ id = "canvas", styles, color = "#ff6348", size = 0 }) => {
  const w = size * 3 + 2;
  const h = size * 3 + 2;
  const style = {
    with: `${w}px`,
    height: `${h}px`,
    ...styles,
  };

  onMount(() => {
    const ln = (i) => i * size + 1;
    const canvas = document.getElementById(id) as HTMLCanvasElement;
    const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
    ctx.lineWidth = 2;
    ctx.lineCap = "round";
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.moveTo(ln(w), ln(0));
    ctx.lineTo(ln(2), ln(0));
    ctx.lineTo(ln(2), ln(3));
    ctx.lineTo(ln(1), ln(3));
    ctx.lineTo(ln(1), ln(0));
    ctx.lineTo(ln(1), ln(0));
    ctx.lineTo(ln(0), ln(0));
    ctx.lineTo(ln(0), ln(1));
    ctx.lineTo(ln(3), ln(1));
    ctx.lineTo(ln(3), ln(2));
    ctx.lineTo(ln(0), ln(2));
    ctx.lineTo(ln(0), ln(h));
    ctx.stroke();
  });

  return <canvas style={style} id={id} width={w} height={h} />;
};

export default Knot;
